<!--
* @FileDescription:sql查询页面，用于workspace页面
-->
<template>
  <div class="SqlQuery">
    <el-form :model="form">
      <el-select v-model="form.dbname" placeholder="选择数据源">
        <el-option
          v-for="item in dboptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button :loading="querying" type="primary" @click="queryclick">
        查询
      </el-button>
      <el-alert
        :title="sql_alert_message"
        type="error"
        center
        :style="sql_alert_display"
        show-icon
        :closable="false"
      ></el-alert>
      <el-input
        :autosize="{ minRows: 2, maxRows: 4 }"
        type="textarea"
        v-model="form.textsql"
      />
    </el-form>

    <ag-grid-vue
      class="ag-theme-balham"
      :rowData="query_result"
      :columnDefs="query_columns"
      :enableRangeSelection="enableRangeSelection"
      :defaultColDef="defaultColDef"
      :onGridReady="onGridReady"
      style="width: 100%; height: 600px"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { dbquery } from "@/apis/query";
import columnsnorm from "@/apis/columnsnorm";
import queryresnorm from "@/apis/queryresnorm";
import { AgGridVue } from "ag-grid-vue3";
import { ref } from "vue";
export default {
  components: { AgGridVue },
  data() {
    return {
      querying: false,
      defaultdb: "dbass",
      rowSelection: "single",
      gridColumnApi: null,
      welldata: this.data,
      enableRangeSelection: true,
      dboptions: [
        { value: "dbass", label: "ass2013" },
        { value: "dbpytrol", label: "pytrol" },
      ],
      defaultColDef: {
        resizable: true,
        wrapText: true,
        autoHeight: true,
        sortable: true,
        filter: true,
      },
      form: {
        dbname: "dbass",
        textsql: ref(
          "select * from M_YJSJ where 井号='乌28-10' order by NY desc \
          select * from RB_YJSJ where RQ = TO_DATE(TO_CHAR(SYSDATE-interval '1' day,'yyyy-mm-dd'),'yyyy-mm-dd')"
        ),
      },
      sql_alert_message: "",
      sql_alert_display: "visibility:hidden",
      tabledisplay: false,
      query_result: [],
      query_columns: [],
      table_pagination: { pageSize: 40 },
    };
  },
  methods: {
    autoSizeAll() {
      this.gridColumnApi.autoSizeAllColumns(false);
    },
    onGridReady(params) {
      this.gridColumnApi = params.columnApi;
    },
    queryclick() {
      //console.log(this.fathername);
      //var sql_alert = document.getElementById(this.id.sql_alert);
      //sql_alert.style.visibility = "hidden";
      this.sql_alert_display = "visibility:hidden";
      this.query_result = "";

      if (this.form.textsql) {
        this.querying = true;
        dbquery(this.form.dbname, this.form.textsql)
          .catch(async (reason) => {
            this.sql_alert_message = reason.message;
            //sql_alert.style.visibility = "visible";
            this.sql_alert_display = "visibility:visible";
            this.querying = false;
          })
          .then(async (result) => {
            if (result.data.err) {
              this.sql_alert_message =
                result.data.err + ":" + result.data.message;
              //sql_alert.style.visibility = "visible";
              this.sql_alert_display = "visibility:visible";
            } else if (result.data.rows.length == 0) {
              this.sql_alert_message = "the query result is null";
              //sql_alert.style.visibility = "visible";
              this.sql_alert_display = "visibility:visible";
            } else if (this.form.dbname == "dbass") {
              this.query_result = queryresnorm(result.data);
              console.log(result.data, this.query_result);
              this.query_columns = columnsnorm(
                Object.keys(this.query_result[0]),
                ["headerName", "field"],
                { sortable: true, filter: true }
              );
            } else if (this.form.dbname == "dbpytrol") {
              0;
            }
            this.querying = false;
            //this.autoSizeAll();
          })
          .then(async (res) => {
            console.log("autosizeall");
            this.autoSizeAll();
          });
      } else {
        this.sql_alert_message = "SQL 输入不能为空";
        //sql_alert.style.visibility = "visible";
        this.sql_alert_display = "visibility:visible";
      }
    },
  },
};
</script>

<style scoped>
.SqlQuery {
  width: 100%;
  height: 100%;
}
.el-alert {
  display: inline;
  visibility: hidden;
  padding-right: 5px;
  padding-bottom: 5px;
}

.el-select {
  padding-right: 5px;
  padding-bottom: 5px;
}
.el-input {
  padding-right: 5px;
  padding-bottom: 5px;
}
.el-form {
  padding-bottom: 5px;
}
</style>
